<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	*{margin: 0;padding 0;}
		.box{
			border: 1px solid red;
			position: relative;
			perspective-origin: 50% 50%;
			width: 500px;
			height: 500px;
			perspective: 500px;
			margin: 20px auto;
			transform-style: preserve-3d;
		}
		.box .box1{
			width: 200px;
			height: 200px;
			margin: 100px auto;
			border: 1px solid red;
			transform-style: preserve-3d;
			animation:boxani 5s infinite linear;
			position: relative;
		}
		.box1 div{
			border: 1px solid black;
			position: absolute;
			color: white;
			font-size: 2em;
			background:rgba(60,60,60,0.5);
			width: 200px;
			height: 200px;
			text-align: center;
			line-height: 200px;
		}
		.box2{
			transform:rotateX(90deg) translateZ(100px);
		}
		.box3{
			transform:rotateX(90deg) translateZ(-100px);
		}
		.box4{
			transform:rotateY(90deg) translateZ(100px);
		}
		.box5{
			transform:rotateY(90deg) translateZ(-100px);
		}
		.box6{
			transform:translateZ(-100px);
		}
		.box7{
			transform:translateZ(100px);
		}
		@keyframes boxani{
			0%{transform:rotateY(0) rotateX(0);}
			100%{transform:rotateY(360deg) rotateX(360deg);}
		}
	</style>
</head>
<body>
<div class="box">
	<div class="box1">
		<div class="box2">box1</div>
		<div class="box3">box2</div>
		<div class="box4">box3</div>
		<div class="box5">box4</div>
		<div class="box6">box5</div>
		<div class="box7">box6</div>
	</div>
</div>
</body>
</html>